@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
html{
    height: 100%;
}
body{
    height: 100%;
    display: flex;
    font-size: 0.16rem;
    flex-direction: column;
}
$w:4rem;
header{
    width:$w ;
    height: 0.5rem;
    background-color: turquoise;
}
main{
    overflow: hidden;
    width: $w;
    height: 100%;
    flex: 1;
    background-color: lightcyan;
    >.content{
        position: relative;
        width: $w;
        min-height:101%;
        background-color:lime;
        >.refresh{
            position: absolute;
            left: 0;
            top: -0.4rem;
            width: $w;
            height: 0.4rem;
            line-height: 0.4rem;
            text-align: center;
            background-color: lightgreen;
            color: #fff;
        }
        >.more{
            position: absolute;
            left: 0;
            bottom:-0.4rem;
            width: $w;
            height: 0.4rem;
            line-height: 0.4rem;
            text-align: center;
            background-color:aquamarine;
            color: #fff;
        }
    }
   
}
footer{
    width: $w;
    height: 0.5rem;
    background-color: deepskyblue;
}